<template>
  <div class="page-card" id="detail">
    <div class="detail">
      <div class="detail-header" style="margin-bottom: 34px">
        <template v-if="!hideAction">
          <a-button type="primary" @click="showEventType = true">修改事件属性</a-button>
        </template>
        <template v-if="!hideAction">
          <span>
            事件类型：
            <a-select style="width: 160px" v-model="typeForm.typeId" @change="updateeventTypeIdAddress">
              <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </span>
          <span>属地：
            <a-select style="width: 160px" v-model="typeForm.address" @change="updateeventTypeIdAddress" placeholder="请选择">
              <a-select-option v-for="item in address" :value="item.title" :key="item.title">{{ item.title }}</a-select-option>
            </a-select>
          </span>
          <!-- <span>事件等级：
            <a-select style="width: 160px" v-model="typeForm.eventGrade" @change="updateeventTypeIdAddress">
              <a-select-option :value="0">普通预警</a-select-option>
              <a-select-option :value="1">中级预警</a-select-option>
              <a-select-option :value="2">高级预警</a-select-option>
              <a-select-option :value="3">特级预警</a-select-option>
            </a-select>
          </span> -->
        </template>
        <!-- <template v-else>
          <span>
            事件类型：{{ eventDetailInfo.typeName }}
          </span>
          <span>属地：
            {{ eventDetailInfo.address }}
          </span>
          <span>
            事件等级：
            <a-tag color="blue" v-if="typeForm.eventGrade == 0">
              普通预警
            </a-tag>
            <a-tag color="yellow" v-else-if="typeForm.eventGrade == 1">
              中级预警
            </a-tag>
            <a-tag color="orange" v-else-if="typeForm.eventGrade == 2">
              高级预警
            </a-tag>
            <a-tag color="red" v-else-if="typeForm.eventGrade == 3">
              特级预警
            </a-tag>
          </span>
        </template> -->

        <div class="detail-right-btn" v-if="!hideAction">
          <a-button type="primary" class="a-button-blue a-button-large" @click="showSettingAction">
            <a-icon type="setting" />配置
          </a-button>
          <a-button v-if="eventDetailInfo.shareLink" type="primary" class="a-button-blue a-button-large" @click="downloadshareLink(eventDetailInfo.shareLink)">
            <a-icon type="cloud-download" />下载报告
          </a-button>
          <a-button v-if="key === 'cz'" type="primary" class="a-button-blue a-button-large" @click="showMark">
            <SvgIcon iconClass="share" />生成数据报告
          </a-button>
          <!-- <h-tooltip title="分享暂未完成" /> -->
          <a-button v-if="showDanger && key === 'cz'" @click="showEvent = true" type="primary" class="a-button-red a-button-large">
            <SvgIcon iconClass="warning" /> 转为应急
          </a-button>
          <a-button @click="showEventOverModal" type="primary" class="a-button-red a-button-large">
            <SvgIcon iconClass="power" /> 结束事件
          </a-button>
        </div>
      </div>
      <h-ccard
        v-if="key === 'cz'"
        size="large"
        style="display: flex"
        class="detail-ccard"
        title="事件进度"
        shadow
        isshow="1"
        :loading="mbloading">
        <!-- <h-tooltip title="事件进度怎么获取" /> -->
        <a-steps progress-dot :current="currentEvent">
          <a-step v-for="item in eventProcList" :key="item.eventProc" :title="item.name" :description="item.createTime" />
        </a-steps>
      </h-ccard>
      <div size="large" class="detail-ccard" shadow :loading="mbloading" style="display: flex;justify-content: space-between">
        <div style="margin-right:20px;width: 100%;overflow:hidden;">
          <div style="display:flex">
            <div>
              <a-tag color="green" v-if="eventDetailInfo.eventLevel == 0">
                普通事件
              </a-tag>
              <a-tag color="red" v-else-if="eventDetailInfo.eventLevel == 1">
                重点事件
              </a-tag>
              <a-tag color="blue" v-if="eventDetailInfo.eventGrade == 0">
                一般预警
              </a-tag>
              <a-tag color="yellow" v-else-if="eventDetailInfo.eventGrade == 1">
                重要预警
              </a-tag>
              <a-tag color="orange" v-else-if="eventDetailInfo.eventGrade == 2">
                紧急预警
              </a-tag>
            </div>
            <div>
              <div style="text-align:left;font-size:24px">
                <h1>事件标题：{{ eventDetailInfo.title | htmlFilter }}</h1>
              </div>
              <div class="detail-tags" style="text-align: left">
                <span>事件来源：{{ eventDetailInfo.source || '无' }}</span>
                <a-divider type="vertical"></a-divider>
                <span>时间：{{ eventDetailInfo.createTime }}</span>
                <a-divider type="vertical"></a-divider>
                <span>事件编号：{{ eventDetailInfo.code }}</span>
              </div>
            </div>
          </div>
          <div class="detail-content" v-html="eventDetailInfo.describe">
          </div>
          <div class="detail-link" style="margin-top:17px;text-align:left;">
            文章链接：
            <a target="_blank" v-if="eventDetailInfo.link" :href="eventDetailInfo.link">{{ eventDetailInfo.link }}</a>
            <span v-else>无</span>
          </div>
        </div>
        <div style="margin-left:20px">
          <div class="detail-flex" style="justify-content: center;">
            <div class="detail-img" v-if="eventDetailInfo.img">
              <viewer :images="[eventDetailInfo.img]">
                <img :src="`${eventDetailInfo.img}?${new Date().getTime()}`" crossOrigin="anonymous" width="100%" alt="">
              </viewer>

            </div>
            <div v-else class="load">
              <viewer >
                <img :src="require('@/assets/Image/image_empty.jpg')" width="160px" alt="">
              </viewer>
            </div>

            <div class="detail-video" v-if="eventDetailInfo.videoUrl && eventDetailInfo.videoStatus == 0">
              <video controls :src="eventDetailInfo.videoUrl" width=""></video>
            </div>
            <div v-else-if="eventDetailInfo.videoStatus == null" class="load">
              <img :src="require('@/assets/Image/video_empty.jpg')" width="160px" alt="">
            </div>
            <div v-else class="load">
              <img :src="require('@/assets/Image/video_empty.jpg')" width="160px" alt="">
            </div>
            </div>
            <div class="detail-file" v-if="eventDetailInfo.enclosure">
            附件：
            <span v-for="(item, i) in fileFormat(eventDetailInfo.enclosure)" :key="i">
              <a :href="item.url" target="_blank">
                <SvgIcon v-if="item.type == 'pdf'" iconClass="pdf" />
                <SvgIcon v-else-if="item.type.includes('doc')" iconClass="word" />
                <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(item.type)" iconClass="image" />
                <SvgIcon v-else iconClass="file" />
              </a>
            </span>
          </div>
        </div>
      </div>
      <a-divider />
      <div>
        <div class="detail-title" style="margin-top: 12px">
          <!-- <a-tag color="red" v-else-if="eventDetailInfo.eventGrade == 3">
            特级预警
          </a-tag> -->
          <a-tag v-for="item in tags" :key="item.id">{{ item.title }}</a-tag>
        </div>
        <!-- <div class="detail-tags detail-tags-big"><span>事件编号：{{ eventDetailInfo.code }}</span></div> -->
      </div>
      <h-ccard
        v-if="key === 'cz'"
        size="large"
        class="detail-ccard"
        title="领导指示"
        shadow
        :loading="mbloading"
        isshow="1">
        <div class="tip-btn">
          <a-button v-if="!hideAction" type="primary" class="a-button-blue a-button-large" @click="showCreateLeader = true">
            <a-icon type="plus"></a-icon> 领导指示
          </a-button>
        <!-- <h-tooltip title="领导指示按钮 用哪个接口" /> -->
        </div>
        <template v-if="eventLeader.length">
          <div class="normal-text" v-for="(item, i) in eventLeader" :key="i">
            <div class="normal-text-footer" style="text-align:left;">
              <span>{{ item.leader }}</span>
              <span>{{ item.createTime }}</span>
            </div>
            <p>{{ item.content }}</p>
          </div>
        </template>
        <a-empty v-else></a-empty>
      </h-ccard>
      <a-divider />
      <!-- <a-divider style="font-size: 22px">处置详情</a-divider> -->
      <h-ccard
        size="large"
        class="detail-ccard"
        title="协同处置"
        shadow
        isshow="2"
        :loading="mbloading">
        <!-- <h-tooltip title="1.为什么每次下发指令，会多出一个单位；2.批量下发指令会报错" /> -->
        <div>
          <!-- <div class="detail-tab">
            <a-button
              @click="tabChange(item)"
              v-for="(item, i) in tab"
              :key="i"
              type="primary"
              shape="round"
              :class="['a-button-blue', 'a-button-large', active == item.departId ? '' : 'a-button-border']">
              {{ item.departName }}
            </a-button>
          </div> -->
          <div class="tip-btn tip-btn2" style="justify-content: right;gap:10px;">
            <span>
              <a-select size="large" v-model="active" style="width: 200px">
                <a-select-option v-for="item in tab" @click="tabChange(item)" :key="item.departId" :value="item.departId">{{ item.departName }}</a-select-option>
              </a-select>
            </span>
            <span>
              数据筛选：
              <a-select size="large" v-model="typeTime" style="width: 200px" @change="setTypeTime">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">30分钟以内</a-select-option>
                <a-select-option value="2">60分钟以内</a-select-option>
                <a-select-option value="3">60分钟以上</a-select-option>
              </a-select>
            </span>
            <div style="margin-top: auto">
              <a-button v-if="!hideAction" type="primary" class="a-button-blue a-button-large" @click="showcreateLeaderOrder = true" style="margin-top10px">
                <SvgIcon iconClass="jg" />发送指令
              </a-button>

            </div>
          </div>
          <div style="height: 15px"></div>
          <!-- <div class="detail-zl-header"> -->
            <!-- <h-tooltip title="这个头部数据从哪取" /> -->
            <!-- <h1>
              下发单位：{{ unit.departName }} -->
              <!-- <a-tag style="margin-left: 12px" color="green" v-if="unit.isSignfor == 1">已签收</a-tag>
              <a-tag style="margin-left: 12px" v-else>未签收</a-tag>
              <a-tag color="blue" v-if="unit.isReply == 1">已回复</a-tag>
              <a-tag v-else>未回复</a-tag> -->
            <!-- </h1> -->
            <!-- <p>签收时间：{{ unit.signForTime || '暂无' }}</p> -->
          <!-- </div> -->
          <table class="detail-table" v-for="(item, i) in eventLeaderOrder" >
            <tr>
              <td colspan="3">
                <div :key="i" style="height: 40px;display: ruby;font-size: 16px;line-height:40px">
                  下发单位：{{ unit.departName }}
                </div>
              </td>
            </tr>
            <tr :key="i">
              <td rowspan="1" class="align-center" width="200" style="width:213px">
                下发内容：
                <a-tag color="green" v-if="item.isSignfor == 1">已签收</a-tag>
                <a-tag v-else>未签收</a-tag>
              </td>
              <td colspan="2">
                <div style="max-width: 80%">{{ item.askContent }}</div>
                <!-- <span class="time" v-if="item.signForTime">{{ item.signForTime }}</span> -->
              </td>
            </tr>
            <tr :key="item.id + i">
              <td>
                指令回复：
                <a-tag color="blue" v-if="item.isReply == 1">已回复</a-tag>
                <a-tag v-else>未回复</a-tag>
              </td>
              <td rowspan="2">
                <div style="display: flex;align-items: center;width: 100%;height: 100%;justify-content: space-between">
                  <div style="flex-grow: 1">
                    <div style="max-width: 70%">{{ item.replyContent }}</div>
                    <div v-if="item.file" class="item-enclosue">
                      附件：
                      <span v-for="items in fileFormat2(item.file)" :key="items">
                      <a :href="items.url" target="_blank">
                        <SvgIcon v-if="items.type == 'pdf'" iconClass="pdf" />
                        <SvgIcon v-else-if="items.type.includes('doc')" iconClass="word" />
                        <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(items.type)" iconClass="image" />
                        <SvgIcon v-else iconClass="file" />
                      </a>
                    </span>
                    </div>
                  </div>
                  <div>
                    <!-- <span class="time" style="margin-right: 70px;" v-if="item.replyTime">{{ item.replyTime }}</span> -->
                    <a-button type="primary" v-if="!hideAction && (active === 0 || active)" @click="leaderSend">
                      <a-icon type="message" /> 追加指令
                    </a-button>
                    <a-button style="margin-left: 15px" type="primary" @click="replySB(item)">值班回复</a-button>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>

      </h-ccard>
        <!-- <div class="tip-btn" v-if="!hideAction">
          <a-button type="primary" class="a-button-blue a-button-large">
            <SvgIcon iconClass="xx" />单位评分
          </a-button>
        </div> -->
      <h-ccard
        size="large"
        class="detail-ccard"
        title="响应评分"
        shadow
        isshow="2"
        :loading="mbloading">
        <a-button v-if="!hideActionDo" slot="right" type="primary" class="a-button-blue" @click="showScoreHistory = true">
          评分历史
        </a-button>
        <h-table
          ref="htable"
          @init="getList"
          :config="config"
          :showHeadBgNone="false"
          :zebraStripes="false">
          <span slot="action" v-if="!hideAction" slot-scope="{record}"><a style="color: #1F3B8A" @click="editScore(record)">编辑</a></span>
        </h-table>
      </h-ccard>

     <template v-if="key === 'cz'">
       <h-ccard
         size="large"
         class="detail-ccard"
         title="关联事件"
         shadow
         isshow="2"
         :loading="mbloading">
         <a-empty style="height: 200px" size="large" v-if="!eventList || !eventList.length"></a-empty>
         <template v-else-if="eventList">
           <div class="scroll event-scroll" >
             <a-row :gutter="[40, 16]" type="flex">
               <a-col
                 :span="12"
                 v-for="(item, i) in eventList"
                 :key="i">
                 <h-alert
                   size="large"
                   :showDetailBtn="false"
                   :showDesc="true"
                   :showDescribe="true"
                   showRight
                   :title="item.title"
                   @toDetail="toLink(item)"
                   showImage
                   v-bind="item" />
               </a-col>
             </a-row>
           </div>
         </template>
       </h-ccard>
       <!-- <a-divider style="font-size: 22px">舆情信息</a-divider>
       <div class="tip-btn" v-if="!hideAction" style="margin-top: 12px">
         <a-button type="primary" class="a-button-blue a-button-large" @click="showInstruction = true">
           <SvgIcon iconClass="yqjc" />发起舆情监测
         </a-button>

         <a-button @click="$router.push({path: '/verifyData', query: {id, title: eventDetailInfo.title}})" type="primary" class="a-button-blue a-button-large" style="margin-left: 20px">
           <SvgIcon iconClass="yz" />数据审核
         </a-button>
       </div> -->

       <h-ccard
         size="large"
         class="detail-ccard"
         title="事件溯源"
         shadow
         isshow="2"
         :loading="mbloading">
         <a-timeline class="timeline-cnt" v-if="eventOriginByEventList.length">
           <a-timeline-item v-for="item in eventOriginByEventList" :key="item.id">
             <div class="timeline-card">
               <SvgIcon iconClass="jt-left" />
               <div>
                 <p>来源</p>
                 <p>
                    <span class="red" v-if="isURL(item.originAddress)">
                      <a :href="item.originAddress" target="_blank">点击查看</a>
                    </span>
                   <span class="red" v-else>{{ item.originAddress }}</span>
                 </p>
                 <p><span>{{ item.originTime }}</span></p>
                 <p v-if="item.sentimentImg">
                   <viewer :images="[item.sentimentImg]">
                     <img :src="item.sentimentImg" width="46px" height="46px" style="object-fit: cover;cursor: pointer" alt="">
                   </viewer>
                 </p>
               </div>
               <div>
                 <p class="timeline-nickname" v-if="item.originUser || item.originPlace"><span v-if="item.originUser">{{ item.originUser }}</span> <span v-if="item.originPlace"><SvgIcon iconClass="location" /> {{ item.originPlace }}</span></p>
                 <a-popover placement="bottomLeft">
                   <template slot="content">
                     <div style="max-width: 1200px" v-html="item.originContent">

                     </div>
                   </template>
                   <font class="ellipsis-4">{{ item.originContent }}</font>
                 </a-popover>

               </div>
             </div>
           </a-timeline-item>
         </a-timeline>
         <a-empty v-else></a-empty>
       </h-ccard>
       <div></div>
       <a-row :gutter="20">
         <a-col :span="8">
           <h-ccard
             style="margin: 0;"
             size="large"
             class="detail-ccard"
             title="相关热搜"
             shadow
             isshow="2"
             :loading="mbloading">
             <!-- <h-tooltip slot="que" title="接口已经接了 就是没数据" /> -->
             <div class="charts">
               <a-empty size="large" class="a-empty-card" v-if="!hotData.length"></a-empty>
               <h-list
                 :hideOrder="true"
                 v-else
                 type="hot"
                 :data="hotData"
                 @detail="toLink"
                 style="height: 500px">
               </h-list>
             </div>
           </h-ccard>
         </a-col>
         <a-col :span="8">
           <h-ccard
             style="margin: 0;"
             size="large"
             class="detail-ccard"
             title="信息分布"
             shadow
             isshow="2"
             :loading="mbloading">
             <!-- <h-tooltip slot="que" title="接口已经接了 就是没数据" /> -->

             <div class="charts">
               <Pie v-if="pieData.length && pieDataLoad" :data="pieData" />
               <div v-else>
                 <a-empty class="a-empty-card"></a-empty>
               </div>
             </div>
           </h-ccard>
         </a-col>
         <a-col :span="8">
           <h-ccard
             style="margin: 0;"
             size="large"
             class="detail-ccard"
             title="地域分布"
             shadow
             isshow="2"
             :loading="mbloading">
             <!-- <h-tooltip slot="que" title="接口已经接了 就是没数据" /> -->

             <div class="charts">
               <ChinaMap v-if="addressList.length" :data="addressList" />
               <div v-else>
                 <a-empty class="a-empty-card"></a-empty>
               </div>
             </div>
           </h-ccard>
         </a-col>
       </a-row>

       <a-row :gutter="20">
         <a-col :span="12">
           <h-ccard class="detail-ccard" title="重点账号" shadow isshow="2">
             <div class="charts">
               <a-empty size="large" class="a-empty-card" v-if="!importantData.length"></a-empty>
               <h-list
                 v-else
                 type="important"
                 :data="importantData"
                 :pagination="false"
                 @detail="toDetail($event, 'zh')"></h-list>
             </div>
           </h-ccard>
         </a-col>
         <a-col :span="12">
           <h-ccard class="detail-ccard" title="重点文章" shadow isshow="2">
             <div class="charts">
               <a-empty size="large" class="a-empty-card" v-if="!articleData.length"></a-empty>
               <h-list
                 v-else
                 type="article"
                 :data="articleData"
                 :pagination="articlePage"
                 @change="changearticle"
                 @detail="toLink"
                 @addWatch="addWatch"></h-list>
             </div>
           </h-ccard>
         </a-col>
       </a-row>

       <h-ccard
         size="large"
         class="detail-ccard"
         title="数据分析"
         isshow="2"
         shadow
         :loading="mbloading">
         <!-- <h-tooltip slot="que" title="数据分析 未完成" /> -->
         <h-query
           :showKey="['startTime,endTime']"
           :showTime="{
              minuteStep: 60,
              secondStep: 60,
            }"
           format="YYYY-MM-DD HH"
           :defaultValueRang="defaultTime"
           @search="searchLineChart">
           <!-- <a-select value="48" class="dataview-select">
             <a-select-option value="48">48小时</a-select-option>
           </a-select> -->
         </h-query>
         <div style="height: 400px">
           <LineCharts v-if="showLineChart" :data="lineChartData" :xAxis="xAxis" />
         </div>
         <a-row style="margin-top: 60px" class="n-row-5" :gutter="[20, 20]">
           <a-col :span="4" v-for="(item, i) in miniChartData.filter((e, i) => i < 5)" :key="i">
             <!-- <h-tooltip title="下面的总数需要吗" /> -->
             <MiniAreaCard :config="item" :type="item.type" />
           </a-col>
         </a-row>
         <a-row :gutter="[20, 20]">
           <a-col :span="8" v-for="(item, i) in miniChartData.filter((e, i) => i >= 5)" :key="i">
             <MiniAreaCard :config="item" :type="item.type" />
           </a-col>
         </a-row>
       </h-ccard>
       <h-ccard
         size="large"
         class="detail-ccard"
         isshow="2"
         title="公共信息区"
         shadow
         :loading="mbloading">
         <template v-if="usermessageList.length">
           <div class="normal-text" v-for="item in usermessageList" :key="item.id">
             <div class="normal-text-footer normal-text-footer-flex ellipsis-2">
               <span>{{ item.createBy }}</span>
               <span>{{ item.createTime }}</span>
             </div>
             <p>{{ item.content }}</p>
             <div v-if="item.enclosure" class="item-enclosue">
                <span v-for="(items, j) in fileFormat(item.enclosure)" :key="j">
                  <a :href="items.url" target="_blank">
                    <SvgIcon v-if="items.type == 'pdf'" iconClass="pdf" />
                    <SvgIcon v-else-if="items.type.includes('doc')" iconClass="word" />
                    <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(items.type)" iconClass="image" />
                    <SvgIcon v-else iconClass="file" />
                  </a>
                </span>
             </div>
           </div>
         </template>
         <a-empty v-else></a-empty>
         <div class="chat-action" v-if="!hideAction">
           <a-textarea
             class="reply-textarea"
             v-model="message"
             style="font-size: 16px"
             size="large"
             :maxLength="200"
             :rows="3"
             placeholder="请输入留言内容"
           ></a-textarea>
           <div class="upload-list" v-if="enclosure.length">
             <div class="upload-each" v-for="item in replyFile" :key="item.imgUrl">
               <svg-icon v-if="['pdf'].includes(item.type.toLowerCase())" iconClass="pdf" />
               <svg-icon v-else-if="['doc', 'docx'].includes(item.type.toLowerCase())" iconClass="word" />
               <svg-icon
                 v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(item.type.toLowerCase())"
                 iconClass="image" />
               <svg-icon v-else iconClass="file" />
               <span class="ellipsis">
                  {{ item.name }}
                </span>
             </div>
           </div>
           <div class="btn-action">
             <a-space>
               <!-- <a-button type="primary">上传附件</a-button> -->
               <UploadImageMutil type="button" ref="image" :length="100" @getUrl="getImgReply" />
               <a-button @click="AddMessage" type="primary">
                 确 认
               </a-button>
             </a-space>
           </div>
         </div>

       </h-ccard>
     </template>
        <h-ccard
        size="large"
        isshow="2"
        class="detail-ccard"
        title="事件总结"
        shadow
        v-if="eventDetailInfo.summary">
          <!-- <h-tooltip slot="que" title="用哪个字段" /> -->
          <p v-if="eventDetailInfo.summary" style="font-size: 16px;line-height: 2">{{ eventDetailInfo.summary }}</p>
          <a-empty v-else></a-empty>

          <div style="text-align: right">
            <a-button type="primary" @click="showeditSummary = true">修改事件总结</a-button>
          </div>
        </h-ccard>
      </h-ccard>
      <a-modal v-model="showeditSummary" title="修改事件总结" @ok="updateSummary">
        <a-form-model ref="ruleForm" :model="overForm" :rules="overrules">
          <a-form-model-item label="时间" >
            <span>{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
          </a-form-model-item>
          <a-form-model-item label="事件总结" prop="summary">
            <a-textarea v-model="overForm.summary" :rows="5"></a-textarea>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <Share
        class="detail"
        ref="share"
        :id="id"
        v-model="shareShow"
        @submit="submitShare"
        @finish="finish">
        <h-ccard size="large" class="detail-ccard" title="事件介绍" shadow :loading="mbloading">
          <div class="detail-title">
            <div class="detail-tag" v-if="eventDetailInfo.eventLevel == 0">
              普通
            </div>
            <div class="detail-tag" v-else-if="eventDetailInfo.eventLevel == 1">
              重点
            </div>
            <h1>事件标题：{{ eventDetailInfo.title }}</h1>
          </div>
          <div class="detail-tags">
            <span>事件来源：{{ eventDetailInfo.source || '无' }}</span>
            <a-divider type="vertical"></a-divider>
            <span>时间：{{ eventDetailInfo.createTime }}</span>
            <a-divider type="vertical"></a-divider>
            <span class="detail-tags-big">事件编号：{{ eventDetailInfo.code }}</span>
          </div>
          <!-- <div class="detail-tags detail-tags-big"><span>事件编号：{{ eventDetailInfo.code }}</span></div> -->
          <div class="detail-content" v-html="eventDetailInfo.describe">

          </div>

          <div class="detail-link">
            文章链接：
            <a v-if="eventDetailInfo.link" :href="eventDetailInfo.link">{{ eventDetailInfo.link }}</a>
            <span v-else>无</span>
          </div>
          <div class="detail-file" v-if="eventDetailInfo.enclosure">
            附件：
            <span v-for="(item, i) in fileFormat(eventDetailInfo.enclosure)" :key="i">
              <a :href="item.url" target="_blank">
                <SvgIcon v-if="item.type == 'pdf'" iconClass="pdf" />
                <SvgIcon v-else-if="item.type.includes('doc')" iconClass="word" />
                <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(item.type)" iconClass="image" />
                <SvgIcon v-else iconClass="file" />
              </a>
            </span>
          </div>
        </h-ccard>
        <a-divider />
      </Share>

      <createScore ref="createScore" :id="scoreId" v-model="showScore" @submit="submit" />

      <historyScore :id="id" v-model="showScoreHistory" />

      <createLeader :eventId="id" :dateDuty="dateDuty" v-model="showCreateLeader" @submit="submitCreateLeader" />

      <createLeaderMsg :id="id" :departId="active" v-model="showcreateLeaderMsg" @submit="geteventOrderList();getdepartIdByEventId()" />

      <createLeaderOrder
        :id="id"
        :formData="eventDetailInfo"
        v-if="showcreateLeaderOrder"
        v-model="showcreateLeaderOrder"
        :describe="eventdescribe"
        @submit="geteventOrderList();getdepartIdByEventId();getList()" />

      <createInstruction :id="id" v-model="showInstruction" />
      <a-modal v-model="showEvent" title="转为应急" @ok="updateEventToEmergency">
        <a-form-model ref="ruleForm" :model="eventForm" :rules="rules">
          <a-form-model-item label="选择值班领导" prop="realname">
            <a-select v-model="eventForm.realname" placeholder="请选择">
              <a-select-option v-for="item in leader" :value="item.realname" :key="item.realname">{{ item.realname }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>

      <a-modal v-model="showOverEvent" title="结束事件" @ok="updateEventToEmergencyOver">
        <a-form-model ref="ruleForm" :model="overForm" :rules="overrules">
          <a-form-model-item label="时间" >
            <span>{{ moment().format('YYYY-MM-DD HH:mm:ss') }}</span>
          </a-form-model-item>
          <a-form-model-item label="上传附件" >
            <!-- <UploadImage type="drag" ref="image" @change="getImg" /> -->
            <UploadImageMutil type="drag" ref="image" :length="100" @getUrl="getImg" />
          </a-form-model-item>
          <a-form-model-item label="事件总结" prop="content">
            <!-- <h-tooltip title="接口没这个字段" /> -->
            <a-textarea v-model="overForm.content" :rows="5"></a-textarea>
          </a-form-model-item>

        </a-form-model>
      </a-modal>
    </div>
    <!-- <div v-else class="detail-loading">
      <a-spin size="large"></a-spin>
    </div> -->

    <a-modal v-model="showEventType" title="修改事件属性" @ok="updateeventTypeIdAddress">
      <a-form-model ref="ruleForm" :model="typeForm" :rules="eventTypeRules">
        <a-form-model-item label="事件类型" prop="typeId">

          <a-select style="width: 100%" v-model="typeForm.typeId">
            <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="属地" prop="address">
          <a-select style="width: 100%" v-model="typeForm.address" placeholder="请选择">
            <a-select-option v-for="item in address" :value="item.title" :key="item.title">{{ item.title }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="事件等级" prop="eventGrade">
          <a-select style="width: 100%" v-model="typeForm.eventGrade">
            <a-select-option :value="0">普通预警</a-select-option>
            <a-select-option :value="1">中级预警</a-select-option>
            <a-select-option :value="2">高级预警</a-select-option>
            <a-select-option :value="3">特级预警</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="事件标签">
          <a-tag
            color="blue"
            v-for="(item, i) in tags"
            :key="i"
            size="large"
            closable
            @close="removeTag(item)">{{ item.title }}</a-tag>
          <a-input-search placeholder="请输入标签名" enter-button="添加" v-model="tagForm.title" @search="addTags" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal v-model="showSetting" title="配置" @ok="updateCockpitSetv">
      <!-- <a-select placeholder="配置驾驶舱" style="width: 100%" v-model="cockpitIds" mode="multiple">
        <a-select-option :key="item.id" :value="item.id" v-for="item in cockpitDict">{{ item.actualValue }}</a-select-option>
      </a-select> -->
      <a-form-model class="typelist-btn" ref="ruleForm" :model="typeForm" :rules="eventTypeRules">
        <a-form-model-item label="驾驶舱默认展示配置" prop="typeId">
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div class="ant-radio-group ant-radio-group-solid ant-radio-group-default">
              <label :class="['ant-radio-button-wrapper', cockpitIds.includes(item.id) ? 'ant-radio-button-wrapper-checked' : '']" :key="item.id" :value="item.id" v-for="item in cockpitDict">
              <span @click="selectRadio(item)" class="ant-radio-button">
                <input type="radio" class="ant-radio-button-input" value="1">
                <span class="ant-radio-button-inner"></span>
              </span>
                <span>{{ item.actualValue }}</span>
              </label>
            </div>
            <!-- <a-radio-group buttonStyle="solid" v-model="cockpitIds">
              <a-radio-button :key="item.id" :value="item.id" v-for="item in cockpitDict">{{ item.actualValue }}</a-radio-button>
            </a-radio-group> -->

            <div style="text-align: right">
              <a-button type="primary" @click="updateCockpitSetv(2)">发送指令</a-button>
            </div>
          </div>
        </a-form-model-item>
<!--        <a-form-model-item label="公司选择" prop="thirdIdList">-->
<!--          <a-select mode="multiple" v-model.lazy="thirdIdList" placeholder="请选择第三方公司">-->
<!--            <a-select-option v-for="item in dept" :key="item.id" :value="item.id">{{ item.companyName }}</a-select-option>-->
<!--          </a-select>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="指令要求（获取驾驶舱重点文章信息）" prop="content">-->
<!--          <a-textarea v-model="content" :rows="4"></a-textarea>-->
<!--        </a-form-model-item>-->
        <a-form-model-item label="截图上传" prop="img">
          <UploadImageMutil ref="UploadImageMutilRef" :length="1" @getUrl="getImg2" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal v-model="imageShow" width="1000px">
      <img :src="`${eventDetailInfo.img}?${new Date().getTime()}`" width="100%" alt="">
    </a-modal>

    <a-modal v-model="showSBLeader" @ok="submitSBLeader">
      <h2 style="text-align: center;">{{ replySBCnt.departName }}</h2>
      <a-row>
        <a-col :span="24">
          指令：
          {{ replySBCnt.askContent }}
        </a-col>
        <a-col :span="24">
          <div style="margin-bottom: 4px">回复：</div>
          <a-textarea v-model="replySBForm.replyContent">

          </a-textarea>
        </a-col>
      </a-row>
    </a-modal>

  </div>

</template>

<script>
import SvgIcon from '@/components/SvgIcon';
// eslint-disable-next-line no-unused-vars
import { querySentimentList, dhData, address, getHotSearchEvent, updateCockpitSetv, selectDictionaries, selectCockpitSet, eventTypeId, getEventProc, eventDetail, eventTypeIdAddress, messageList, updateEventToEmergency, getAddressNum, addMessage, getFromNum, everDetail, eventOriginByEventId, departIdByEventId, eventLeaderList, eventOrderList, addEventShare, queryLinkStatus, queryEventDateList, getDepartIdByEventId, queryEventData, getLeader, getEventLabelByEventId, addEventLabelByEventId, deleteEventLabelById, updateEventEnd, getThirdName, getStressNumberEvent, getStressArticleEventt, eventDutyOrder } from '@/api/serve';
import { unitScoreList } from '@/api/dept';
import Pie from '@/components/Charts/Pie/Index';
import ChinaMap from '@/components/Charts/ChinaMap/Index';
import LineCharts from '@/components/Charts/LineCharts/Index';
import UploadImageMutil from '@/components/UploadImageMutil';
import MiniAreaCard from '@/components/Charts/MiniArea/MiniAreaCard';
import Share from './modules/Share';
import createScore from './createScore';
import historyScore from './historyScore';
import createLeader from './createLeader';
import createLeaderMsg from './createLeaderMsg';
import createLeaderOrder from './createLeaderOrder';
import createInstruction from './createInstruction';
import moment from 'moment';
import { mapState } from 'vuex';
import { isURL } from '@/utils/common';

export default {
  components: {
    SvgIcon,
    Pie,
    ChinaMap,
    LineCharts,
    MiniAreaCard,
    Share,
    createScore,
    historyScore,
    createLeader,
    createLeaderMsg,
    createLeaderOrder,
    createInstruction,
    UploadImageMutil
  },
  inject: ['toLink', 'refresh'],
  data() {
    return {
      moment,
      eventdescribe: '',
      leader: [],
      showSBLeader: false,
      replySBCnt: {},
      replySBForm: {},
      // cockpitIds: [],
      showSetting: false,
      showEventType: false,
      address: [],
      tagForm: {},
      typeTime: '0',
      showCreateLeader: false,
      currentEvent: 0,
      showLineChart: false,
      showcreateLeaderMsg: false,
      showInstruction: false,
      showcreateLeaderOrder: false,
      lineChartData: [],
      cockpitDict: [],
      cockpitIds: [],
      xAxis: [],
      defaultTime: [moment().format('YYYY-MM-DD') + ' 00:00:00', moment().format('YYYY-MM-DD') + ' 23:59:59'],
      id: '',
      loaded: false,
      thirdIdList: [],
      content: '',
      dept: [],
      message: '',
      shareShow: false,
      showScore: false,
      showScoreHistory: false,
      showEvent: false,
      eventDetailInfo: {},
      eventList: [],
      eventLeader: [],
      showOverEvent: false,
      eventOriginByEventList: [],
      eventForm: {
        eventProc: 4,
        eventGrade: '0'
      },
      mbloading: false,
      overForm: {
        eventProc: 3,
        enclosure: ''
      },
      replyFile: [],
      rules: {
        realname: [{ required: true, message: '请选择' }]
      },
      overrules: {
        content: [{ required: true, message: '请输入' }],
        summary: [{ required: true, message: '请输入' }]
      },
      eventTypeRules: {
        typeId: [{ required: true, message: '请输入' }],
        address: [{ required: true, message: '请输入' }],
        eventGrade: [{ required: true, message: '请输入' }]
        // thirdIdList: [{ required: true, message: '请输入' }],
      },
      typeForm: {
        typeId: '',
        address: '',
        eventGrade: '',
        id: '',
        img: '',
      },
      imageShow: false,
      tags: [],
      tab: [
        // {
        //   departName: '***单位1',
        //   departId: 1
        // },
        // {
        //   departName: '***单位2',
        //   departId: 2
        // },
        // {
        //   departName: '***单位3',
        //   departId: 3
        // }
      ],
      showeditSummary: false,
      active: 1,
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '单位名称',
            dataIndex: 'depart',
            width: 300
          },
          {
            align: 'center',
            title: '接收时效',
            dataIndex: 'reIndex'
          },
          {
            align: 'center',
            title: '接收评分',
            dataIndex: 'reScore'
          },
          {
            align: 'center',
            title: '回复时效',
            dataIndex: 'replyIndex',
            width: 300
          },
          {
            align: 'center',
            title: '回复评分',
            dataIndex: 'replyScore',
            width: 300
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: false
      },
      hotData: [],
      pieData: [

      ],
      scoreId: '',
      pieDataLoad: false,
      addressList: [],
      usermessageList: [],
      eventLeaderOrder: [],
      miniChartData: [
        {
          title: '文章数量',
          num: 0,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总文章数量',
          total: 12846,
          type: 0,
          key: 'articleNumber'
        },
        {
          title: '阅读量',
          num: 0,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总阅读量',
          total: 12846,
          type: 1,
          key: 'readNum'
        },
        {
          title: '点赞量',
          num: 0,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总点赞量',
          total: 12846,
          type: 2,
          key: 'likeNum'
        },
        {
          title: '评论数',
          num: 0,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总评论数',
          total: 12846,
          type: 3,
          key: 'commentNum'
        },
        {
          title: '转发量',
          num: 0,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总转发量',
          total: 12846,
          type: 4,
          key: 'transNum'
        }
        // {
        //   title: '指令下发数',
        //   num: 0,
        //   data: [2000, 1500, 1800, 800, 1500, 980, 1800],
        //   totalText: '总指令下发数',
        //   total: 12846,
        //   type: 0,
        //   key: 'instructionSendNum'
        // },
        // {
        //   title: '数据提交数',
        //   num: 0,
        //   data: [2000, 1500, 1800, 800, 1500, 980, 1800],
        //   totalText: '总数据提交数',
        //   total: 12846,
        //   type: 1,
        //   key: 'dataSubmittedNum'
        // },
        // {
        //   title: '评价响应时长',
        //   num: 0,
        //   data: [2000, 1500, 1800, 800, 1500, 980, 1800],
        //   totalText: '总评价响应时长',
        //   total: 12846,
        //   type: 2,
        //   key: 'responseTime'
        // }
      ],
      key: '',
      hideActionDo: false,
      typeList: [],
      // 0发起任务，1领导指示，2处置过程，3事 件完结
      eventProcList: [
        {
          name: '发起任务',
          eventProc: 0,
          createTime: ''
        },
        {
          name: '任务下发',
          eventProc: 1,
          createTime: ''
        },
        {
          name: '正在处置',
          eventProc: 2,
          createTime: ''
        },
        {
          name: '情况反馈',
          eventProc: 6,
          createTime: ''
        },
        // {
        //   name: '处置过程',
        //   eventProc: 2,
        //   createTime: ''
        // }
        {
          name: '任务完结',
          eventProc: 3,
          createTime: ''
        }
      ],
      isSignfor: {
        0: '未签收',
        1: '已签收'
      },
      isReply: {
        0: '未回复',
        1: '已回复'
      },
      autoShare: false,
      dateDuty: '',
      enclosure: '',
      importantData: [],
      articleData: []
    };
  },
  filters: {

  },
  computed: {
    ...mapState({
      modelName: state => state.user.modelName
    }),
    fileFormat() {
      return function(file) {
        if (!file) return [];
        const list = file.split(',');
        return list.map(e => {
          const index = e.lastIndexOf('.');
          return {
            type: e.substring(index + 1, e.length).toLowerCase(),
            url: e
          };
        });
      };
    },
    unit() {
      const unit = this.tab.find(e => e.departId == this.active);
      return unit || '无';
    },
    hideAction() {
      return this.hideActionDo || this.$route.query.type == 2 || this.$route.query.type == 5 || this.$route.query.type == 'history';
    },
    showDanger() {
      return this.$route.query.type != 4 && this.eventDetailInfo.eventProc != 4;
    }
  },
  async created() {
    this.id = this.$route.query.id; // '5838741169245620231' ||
    this.typeId = this.$route.query.typeId;
    this.key = this.$route.query.key;
    this.autoShare = this.$route.query.autoShare;

    if (this.$route.query.type == 5) {
      try {
        await queryLinkStatus({
          url: location.href
        });
      } catch (err) {
        this.$router.push('/404');
        return;
      }
    }

    this.detail();

    this.getEventProcList();

    await this.getdepartIdByEventId();

    this.getAddress();

    this.getCzsj();
    this.getHotList();
    // 留言列表
    this.getMessageList();
    // 领导指示
    this.geteventLeaderList();
    // 下发指令列表
    this.geteventOrderList();
    // 事件溯源
    this.geteventOriginByEventId();
    // 信息分布
    this.getFromNumChart();
    // 地域分布
    this.getAddressNumList();
    // 事件分析折线图
    this.getQueryEventDateList();
    // this.getDepartIdByEventId();
    this.queryEventData();
    this.getLeader();

    this.getImpAccount();
    this.getImpArticle();

    this.loaded = true;

    if (this.autoShare) {
      this.$nextTick(() => {
        this.showMark(2000);
      });
    }
  },
  mounted() {
    this.getEventLabelByEventId();
  },
  methods: {
    fileFormat2(_file) {
      console.log('_file', _file);
      if (!_file) return []
      let file = [JSON.parse(_file)]
      return file.map(item => {
        return {
          name: item.item,
          type: item.name.split('.')[item.name.split('.').length - 1],
          url: item.url
        }
      })
    },
    getLeader() {
      getLeader().then(res => {
        this.leader = res.data;
      });
    },
    getEventLabelByEventId() {
      getEventLabelByEventId({
        eventId: this.id
      }).then(res => {
        this.tags = res.data;
      });
    },
    getAddress() {
      address().then(res => {
        this.address = res.data;
      });
    },
    searchLineChart(params) {
      this.defaultTime = [params.startTime, params.endTime];
      this.getQueryEventDateList(params);
    },
    getQueryEventDateList({ startTime, endTime } = {}) {
      this.showLineChart = false;
      queryEventDateList({
        id: this.id,
        startTime: startTime || `${moment().format('YYYY-MM-DD')} 00:00:00`,
        endTime: endTime || `${moment().format('YYYY-MM-DD')} 24:00:00`
      }).then(res => {
        const key = [
          'likeNum',
          'readNum',
          'commentNum',
          'transNum',
          'articleNumber'
        ];
        const name = {
          [key[0]]: '点赞量',
          [key[1]]: '阅读量',
          [key[2]]: '评论数',
          [key[3]]: '转发量',
          [key[4]]: '文章数量'
        };
        this.xAxis = Object.keys(res.data);
        const valueData = {};
        Object.values(res.data).forEach((e, i) => {
          e.forEach((el, i) => {
            if (valueData[key[i]]) {
              valueData[key[i]].push(el[key[i]]);
            } else {
              valueData[key[i]] = [el[key[i]]];
            }
          });
        });
        this.lineChartData = key.map(e => {
          return {
            name: name[e],
            type: 'line',
            data: valueData[e]
          };
        });
        // console.log(this.lineChartData);
        this.showLineChart = true;
      });
    },
    queryEventData() {
      queryEventData({
        id: this.id
      }).then(res => {
        this.miniChartData = this.miniChartData.map(e => {
          return {
            ...e,
            num: res.data[e.key] || 0
          };
        });
      });
    },
    finish() {
      this.shareShow = false;
      this.hideActionDo = false;
      if (!this.autoShare) {
        this.refresh();
      }
    },
    showMark(time = 0) {
      this.$refs.share.showMark('detail', time);
      this.hideActionDo = true;
      this.mbloading = true;
    },
    submitShare() {
      this.mbloading = false;
      if (this.autoShare) {
        // window.close();
      }
      // this.$refs.share.submit('detail');
      // addEventShare({ eventId: this.id }).then(res => {
      //   this.$message.success('分享成功');
      //   this.shareShow = false;
      //   // const h = this.$createElement;
      //   if (res.url) {
      //     // queryLinkStatus({
      //     //   url: res.url
      //     // }).then(res => {
      //     //   // this.$message.success(res.msg);
      //     //   this.$info({
      //     //     title: '分享链接',
      //     //     content: h('div', {}, [
      //     //         h('a', {
      //     //           attrs: {
      //     //             target: '_blank',
      //     //             href: res.data
      //     //           }
      //     //         }, res.data)
      //     //       ])
      //     //     });
      //     //   // this.$router.push({ path: '/handleEvent/watch' });
      //     // });
      //   }
      // });
    },
    getType() {
      eventTypeId({
        eventId: this.id
      }).then(res => {
        this.typeList = res.data;
        const name = this.typeList.find(e => e.name == this.eventDetailInfo.typeName);
        if (name) {
          this.typeForm.typeId = name.id;
        }
      });
    },
    async getEventProcList() {
      const serve = [];
      this.eventProcList.forEach((e, i) => {
        serve.push(getEventProc({
          eventId: this.id,
          eventProc: e.eventProc
        }));
        // getEventProc({
        //   eventId: this.id,
        //   eventProc: e.eventProc
        // }).then(res => {
        //   if (res.data && res.data.createTime) {
        //     this.currentEvent = i;
        //   }
        //   e.createTime = res.data && res.data.createTime;
        // });
      });
      const res = await Promise.all(serve);
      console.log('[res]', res);
      const data = res.map(e => e.data);
      data.forEach((e, i) => {
        if (e && e.createTime) {
          this.currentEvent = i;
        }

        this.$set(this.eventProcList[i], 'createTime', e && e.createTime);
      });

      if (this.eventDetailInfo.eventProc == 5) this.currentEvent = 3;
    },
    detail() {
      const detailKey = {
        // 处置事件
        cz: '/web/event/get_eventDetail',
        // 观察事件
        gc: '/web/event/get_observeEventDetail',
        // 舆情事件
        yq: '/web/sentiment/get_sentimentDetail',
        // 网络安全
        wl: '/web/safetybulletin/query_safetybulletinDetail',
        // 热搜详情
        rs: '/web/hotsearchlist/get_hotserchdetails',
        // 重点账号
        zh: '/web/stressnumber/get_numberdetails',
        // 重点文章
        wz: '/web/feature/get_Articledetails',
        // 东海数据
        dh: '/web/third/get_donghaiDetail'

      };
      everDetail(detailKey[this.key], { id: this.id }).then(res => {
        this.eventDetailInfo = res.data;
        this.eventDetailInfo.describe = '事件描述：' + this.eventDetailInfo.describe;
        this.dateDuty = res.data.dateDuty;
        this.typeForm = {
          typeId: res.data.typeId,
          address: res.data.address,
          eventGrade: res.data.eventGrade,
          id: res.data.id
        };
        console.log(this.typeForm, 'eventProc');

        // this.eventDetailInfo.img = 'http://www.hugoooo.com/img/img.png';

        this.getType();

        if (this.eventDetailInfo.eventProc == 5) this.currentEvent = 3;
      });
    },
    updateeventTypeIdAddress() {
      eventTypeIdAddress(this.typeForm).then(res => {
        this.$message.success('修改成功');
        this.refresh();
      });
    },
    isURL(url) {
      console.log('isURL', url, isURL(url));
      return isURL(url);
    },
    // 关联事件
    getCzsj() {
      querySentimentList({
        eventId: this.id
      }).then(res => {
        this.eventList = res.data.records.map(e => {
          return {
            ...e,
            no: e.code,
            type: e.eventLevel == 0 ? 'primary' : 'danger',
            // sendNum: e.askNum,
            desc: e.describe,
            createTime: e.createTime,
            source: e.source,
            imgIcon: e.img
          };
        });

        console.log(this.eventList, 'this.eventList');
      });
    },
    // 单位评分
    getList(params) {
      unitScoreList({
        eventId: this.id
      }).then(res => {
        this.config.dataSource = res.data;
      });
    },
    submit() {
      this.getList();
    },
    // 相关热搜
    getHotList() {
      getHotSearchEvent({
        eventId: this.id,
        pageNo: 1,
        pageSize: 9
      }).then(res => {
        this.hotData = res.data.records.map((e, i) => {
          return {
            ...e,
            source: `数据来源：${e.source}`,
            createTime: `获取时间：${moment(e.createTime).format('MM/DD HH:mm')}`,
            order: i + 1,
            hotNum: e.hotNumber
          };
        });
      });
    },
    // 留言列表
    getMessageList() {
      messageList({
        id: this.id
      }).then(res => {
        this.usermessageList = res.data;
      });
    },
    AddMessage() {
      if (!this.message) return;
      addMessage({
        eventId: this.id,
        content: this.message,
        enclosure: this.enclosure
      }).then(res => {
        this.$message.success('留言成功！');
        this.getMessageList();
        this.replyFile = [];
        this.enclosure = '';
        this.$refs.image.clear();
        this.message = '';
      });
    },
    editScore(record) {
      this.showScore = true;
      // this.$refs.createScore.edit(record);
      this.scoreId = record.id;
    },
    submitCreateLeader() {
      this.geteventLeaderList();
      this.getEventProcList();
    },
    // 领导指示
    geteventLeaderList() {
      eventLeaderList({
        eventId: this.id
      }).then(res => {
        this.eventLeader = res.data;
      });
    },
    setTypeTime() {
      this.geteventOrderList();
    },
    tabChange({ departId }) {
      this.active = departId;
      this.geteventOrderList();
    },
    // 指令
    geteventOrderList() {
      eventOrderList({
        eventId: this.id,
        departId: this.active,
        typeTime: this.typeTime
      }).then(res => {
        this.eventLeaderOrder = res.data
      });
    },
    // 通过事件id查询当前指令的所属部门id
    getdepartIdByEventId() {
      return new Promise((resolve) => {
        departIdByEventId({
          eventId: this.id
        }).then(res => {
          this.tab = res.data;
          this.active = (res.data && res.data[0] && res.data[0].departId) || '';
          // console.log(this.active, 'this.activethis.active');
          resolve();
          // this.eventLeader = res.data;
        });
      });
    },
    // 事件溯源
    geteventOriginByEventId() {
      eventOriginByEventId({
        eventId: this.id
      }).then(res => {
        this.eventOriginByEventList = res.data;
      });
    },
    downloadshareLink(link) {
      window.open(link);
    },
    // 信息分布
    getFromNumChart() {
      // const d = {
      //   0: '自媒体',
      //   1: '省外媒体',
      //   2: '商业平台',
      //   3: '央媒',
      //   4: '其他'
      // };
      getFromNum({
        eventId: this.id
      }).then(res => {
        // res = [
        //   {
        //     'address': null,
        //     'sum': '2',
        //     'distribution': '0'
        //   },
        //   {
        //     'address': null,
        //     'sum': '2',
        //     'distribution': '1'
        //   }
        // ];
        this.pieData = res.data.map(e => {
          return {
            name: e.distribution,
            value: Number(e.sum)
          };
        });
        this.pieDataLoad = true;
      });
    },
    // 地域分布
    getAddressNumList() {
      getAddressNum({
        eventId: this.id
      }).then(res => {
        this.addressList = res.data.map(e => {
          return {
            value: Number(e.sum),
            name: e.address
          };
        });
      });
    },
    updateEventToEmergency(eventProc) {
      this.eventForm.id = this.id;
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '是否要转为应急？',
        onOk() {
          updateEventToEmergency({
            eventProc: 4,
            eventGrade: 3,
            id: that.id,
            handleType: 1,
            leader: that.eventForm.realname
          }).then(res => {
            that.$message.success('转为应急成功');
            // that.showEvent = false;
            that.refresh();
          });
        }
      });
    },
    showEventModal() {
      this.showEvent = true;
    },
    showEventOverModal() {
      this.showOverEvent = true;
    },
    updateEventToEmergencyOver() {
      this.overForm.id = this.id;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const that = this;
          this.overForm.id = this.id;
          this.$confirm({
            title: '温馨提示',
            content: '是否结束事件？',
            onOk() {
              updateEventToEmergency({
                eventProc: 3,
                id: that.id,
                summary: that.overForm.content,
                enclosure: that.overForm.enclosure
              }).then(res => {
                that.$message.success('操作成功');
                that.showOverEvent = false;
                that.$router.push('/overEvent/index');
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 下发指令
    leaderSend() {
      this.showcreateLeaderMsg = true;
    },
    addTags() {
      if (this.tagForm.title) {
        addEventLabelByEventId({
          eventId: this.id,
          title: this.tagForm.title
        }).then(res => {
          this.tagForm.title = '';
          this.getEventLabelByEventId();
        });
      }
    },
    removeTag({ id }) {
      deleteEventLabelById({ id }).then(res => {
        this.getEventLabelByEventId();
      });
    },
    updateSummary() {
      updateEventEnd({
        id: this.id,
        summary: this.overForm.summary
      }).then(res => {
        this.showeditSummary = false;
        this.$message.success('修改成功');
        // this.refresh();
        this.eventDetailInfo.summary = this.overForm.summary;
      });
    },
    selectDictionaries() {
      selectDictionaries().then(res => {
        this.cockpitDict = res.data;
        if(res.data.length) {
          this.cockpitIds = [res.data[0].id];
          this.selectCockpitSet();
        }
      });
    },
    showSettingAction() {
      this.showSetting = true;
      this.selectDictionaries();
      this.getComponey();
    },
    selectCockpitSet() {
      selectCockpitSet({
        eventId: this.id
      }).then(res => {
        const data = res.data;
        if (data.length) {
          this.cockpitIds = data.map(e => e.dictionaryId)
          this.typeForm.img = data[0].img || ''
          if (this.typeForm.img) {
            this.$nextTick(() => {
              this.$refs.UploadImageMutilRef.setFileList([
                {
                  url: this.typeForm.img
                }
              ])
            });
          } else {
            this.$nextTick(() => {
              this.$refs.UploadImageMutilRef.setFileList([
              ])
            });
          }
        }
        this.thirdIdList = data.companyId || [];
        this.content = data.content;
      });
    },
    getImg2(url) {
      this.typeForm.img = url;
    },
    updateCockpitSetv(type) {
      const form = {
        eventId: this.id
      };
      if (type == 2) {
        Object.assign(form, {
          listId: this.cockpitIds,
          companyId: this.thirdIdList,
          content: this.content
        });
      } else {
        Object.assign(form, {
          listId: this.cockpitIds,
          companyId: []
        });
      }
      updateCockpitSetv({
       ...form,
        img: this.typeForm.img
      }).then(res => {
        this.$message.success('配置成功！');
        this.showSetting = false;
        this.detail();
      });
    },
    getImg(url) {
      this.overForm.enclosure = url;
    },
    getImgReply(url, file) {
      console.log(file);
      this.enclosure = url;
      this.replyFile = file.map(e => {
        return {
          ...e,
          type: (e.imgUrl && e.imgUrl.substring(e.imgUrl.lastIndexOf('.') + 1, e.imgUrl.length)) || ''
        };
      });
      console.log(url);
    },
    getComponey() {
      getThirdName().then(res => {
        this.dept = res.data;
        // this.thirdIdList = res.data.map(e => e.id);
      });
    },
    toDetail(item, key, type) {
      this.$router.push({ path: '/detail', query: { id: item.id, typeId: item.typeId, key, type } });
    },
    selectRadio(item) {
      console.log(item);
      this.cockpitIds = [item.id];
      // console.log(id, this.cockpitIds);
      // if (this.cockpitIds.includes(id)) {
      //   const index = this.cockpitIds.findIndex(e => e == id);
      //   if (index != -1) this.cockpitIds.splice(index, 1);
      // } else {
      //   this.cockpitIds.push(id);
      // }
    },
    // 重点账号
    getImpAccount(page) {
      getStressNumberEvent({
        eventId: this.id,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        this.importantData = res.data.records.map((e, i) => {
          return {
            ...e,
            account: e.name,
            order: i + (((page || 1) - 1) * 9) + 1,
            // order: i + 1,
            tag: e.label,
            // createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
            createTime: e.likeTime ? `${moment(e.likeTime).format('MM/DD HH:mm')}` : ''
          };
        });
        // this.importantDataPage.total = res.data.total;
      });
    },
    // 重点文章
    getImpArticle(page) {
      getStressArticleEventt({
        eventId: this.id,
        pageNo: 1,
        pageSize: 10,
        isDelete: 0
      }).then(res => {
        this.articleData = res.data.records;
        // this.articlePage.total = res.data.total;
      });
    },
    replySB(item) {
      this.replySBCnt = item;
      this.replySBForm.replyContent = '';
      console.log(item);
      this.showSBLeader = true;
    },
    submitSBLeader() {
      if (!this.replySBForm.replyContent) {
        this.$message.error('请输入内容');
        return;
      }
      eventDutyOrder({
        id: this.replySBCnt.id,
        ...this.replySBForm
      }).then(res => {
        this.$message.success('回复成功');
        this.getList();
        this.showSBLeader = false;
        this.geteventOrderList();
      });
    }
  }
};
</script>

<style lang="less">
  .typelist-btn {
    &.ant-form label.ant-radio-button-wrapper {
      margin-right: 12px;
      border-radius: 4px !important;
      border: 1px solid #1F3A88;
      color: #1F3A88;
      // width: 84px;
      // height: 35px;
      font-size: 14px !important;
    }
    .ant-radio-button-wrapper::before {
      display: none;
    }
    .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
      color: #fff;
    }
  }
  .charts {
    height: 500px;
  }
  .dataview-select {
    position: absolute;
      right: 0;
      top: 0;
  }
  .detail-loading {
    text-align: center;
    height: 600px;
    line-height: 600px;
  }
  .event-scroll {
    height: 226px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
  }
  .detail-tags-big {
    // margin-top: -8px;
    // >span {
    //   font-size: 20px;
    //   color: #333;
    // }
    position: absolute;
    right: 40px;
    top: 20px;
    font-size: 18px;
    font-weight: bold;
      // color: #333;
  }

  .chat-action {
    box-shadow: 0px 1px 2px 1px rgba(184, 200, 224, 0.22);
    border-radius: 14px 14px 14px 14px;
    border: 1px solid #D8E0F0;
    min-height: 230px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    .btn-action {
      position: absolute;
      right: 8px;
      bottom: 12px;
      button {
        border-radius: 8px;
      }
    }
  }

  .reply-textarea {
    border: none;
    resize: none;
    padding: 12px 16px;
    &:focus {
      border: none;
      outline: none;
      box-shadow: none;
    }
  }

  .upload-list {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
  }
  .upload-each {
    width: 190px;
    height: 45px;
    margin: 4px;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 12px;
    .svg-icon {
      font-size: 30px;
      flex-basis: 30px;
      flex-shrink: 0;
    }
    >span {
      margin-left: 8px;
    }
  }

  .detail-content-sourse {
    width: 20%;
    flex-shrink: 1;
    margin-right: 20px;
  }
  .detail-content{
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    line-height: 38px;
    margin-top: 17px;
  }
  .detail-flex {
    display: flex;
    .detail-img {
      margin-bottom: 20px;
      cursor: pointer;
      border: 1px solid #ddd;
      height: 200px;
      width: 200px;
      margin-top: 20px;
      img {
        height: 200px;
        width: 200px;
        object-fit: cover;
      }
    }
    .detail-video {
      margin-top: 20px;
      height: 200px;
      margin-left: 12px;
      video {
        height: 200px;
        max-width: 300px;
        object-fit: cover;
      }
    }
  }

  .detail-content2 {
    width: 100%;
    max-width: 1600px;
    text-align: center;
    position: relative;
    margin: 0 auto;
    padding-bottom: 40px;
    font-size: 18px;
    .detail-link{
      position: absolute;
      bottom: 0;
      width: 100%;
      // 溢出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        // 溢出省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .detail-link{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    a {
      // 溢出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .load {
    text-align: center;
    margin: 30px 12px;
    margin-bottom: 0;
    font-size: 18px;
    color: #1F3A88;
    // min-width: 200px;
  }
  .detail .detail-ccard {
    margin-bottom: 0;
    margin-top: 0;
  }
  .detail-table {
    border: none;
    table{
      border: none !important;
      border-collapse: collapse;
      tr, td {
    }
    }
    th, td {
    }
  }
  table {
      border: 0;
    }
</style>
